<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>

<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">
    <div th:replace="common/top">
    </div>
<!--    &lt;!&ndash; Header &ndash;&gt;-->
<!--    <header id="header" class="alt">-->
<!--        <a href="index.html" class="logo"><strong>MyPetStore</strong> <span>Copyright Central South University</span></a>-->
<!--        <nav>-->
<!--            <a href="#menu">Menu</a>-->
<!--        </nav>-->
<!--    </header>-->

<!--    &lt;!&ndash; Menu &ndash;&gt;-->
<!--    <nav id="menu">-->
<!--        <ul class="links">-->
<!--            <li><a href="index.html">Home</a></li>-->
<!--            <li><a href="landing.html">Landing</a></li>-->
<!--            <li><a href="generic.html">Generic</a></li>-->
<!--            <li><a href="elements.html">Elements</a></li>-->
<!--        </ul>-->
<!--        <ul class="actions stacked">-->
<!--            <li><a href="#one" class="button primary fit">Get Started</a></li>-->
<!--            <li><a href="#" class="button fit">Log In</a></li>-->
<!--        </ul>-->
<!--    </nav>-->

    <!-- Banner -->
    <section id="banner" class="major">
        <div class="inner">
            <header class="major">
                <h1>Welcome to MyPetStore!</h1>
            </header>
            <div class="content">
                <ul class="actions">
                    <li><a href="#one" class="button next scrolly">Get Started</a></li>
                </ul>
            </div>
            <div id="QuickLinks">
                <a href="/catalog/viewCategory?categoryId=FISH">
                    Fish
                </a>
                <img src="../images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=DOGS">
                    Dogs
                </a>
                <img src="../images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=REPTILES">
                    Reptiles
                </a>
                <img src="../images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=CATS">
                    Cats
                </a>
                <img src="../images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=BIRDS">
                    Birds
                </a>
            </div>
        </div>
    </section>

    <!-- Main -->
    <div id="main">

        <!-- One -->
        <section id="one" class="tiles">
<!--            <article>-->
<!--									<span class="image">-->
<!--										<img src="../images/pic01.jpg" alt="" />-->
<!--									</span>-->
<!--                <header class="major">-->
<!--                    <h3><a href="/catalog/viewCategory?categoryId=BIRDS">BIRDS</a></h3>-->
<!--                    <p>Exotic Varieties</p>-->
<!--                </header>-->
<!--            </article>-->
<!--            <article>-->
<!--									<span class="image">-->
<!--										<img src="../images/pic02.jpg" alt="" />-->
<!--									</span>-->
<!--                <header class="major">-->
<!--                    <h3><a href="/catalog/viewCategory?categoryId=CATS">CATS</a></h3>-->
<!--                    <p>Various Breeds, Exotic Varieties</p>-->
<!--                </header>-->
<!--            </article>-->
<!--            <article>-->
<!--									<span class="image">-->
<!--										<img src="../images/pic03.jpg" alt="" />-->
<!--									</span>-->
<!--                <header class="major">-->
<!--                    <h3><a href="/catalog/viewCategory?categoryId=DOGS">DOGS</a></h3>-->
<!--                    <p>Various Breeds</p>-->
<!--                </header>-->
<!--            </article>-->
<!--            <article>-->
<!--									<span class="image">-->
<!--										<img src="../images/pic04.jpg" alt="" />-->
<!--									</span>-->
<!--                <header class="major">-->
<!--                    <h3><a href="/catalog/viewCategory?categoryId=FISH">FISH</a></h3>-->
<!--                    <p>Saltwater, Freshwater</p>-->
<!--                </header>-->
<!--            </article>-->
<!--            <article>-->
<!--									<span class="image">-->
<!--										<img src="../images/pic05.jpg" alt="" />-->
<!--									</span>-->
<!--                <header class="major">-->
<!--                    <h3><a href="/catalog/viewCategory?categoryId=REPTILES">REPTILES</a></h3>-->
<!--                    <p>Lizards, Turtles, Snakes</p>-->
<!--                </header>-->
<!--            </article>-->

            <article th:each="category:${categoryList}">
                <span class="image">
                    <img th:src="${category.description}" alt=""/>
                </span>
                <header class="major">
                    <h3><a th:href="@{/catalog/viewCategory(categoryId=${category.categoryId})}" th:text="${category.categoryId}">0</a></h3>
                </header>
            </article>

        </section>



    </div>


    <div th:replace="common/bottom">

    </div>
</div>


</body>
</html>